<template>
    <div class="mod-config">
      <el-row :gutter="20">
        <!--类型数据-->
        <el-col :span="4" :xs="24" style="padding-left: 30px;padding-right: 10px">
          <div class="head-container">
            <el-input
              v-model="leiXingName"
              placeholder="请输入类型名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px;"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="leiXingList"
              :props="props"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <!--数据-->
        <el-col :span="20" :xs="24">
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">

            <el-form-item>
              <el-input v-model="dataForm.mingCheng" placeholder="药品名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="dataForm.miaoShu" placeholder="描述" clearable></el-input>
            </el-form-item>

            <el-form-item>
              <el-button @click="getDataList(1)">查询</el-button>
              <el-button type="primary" @click="addOrUpdateHandle()">新增
              </el-button>
              <el-button type="danger" @click="deleteHandle()"
                         :disabled="dataListSelections.length <= 0">批量删除
              </el-button>
            </el-form-item>
          </el-form>

          <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column
              label="选中"
              type="selection"
              header-align="center"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              header-align="center"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
              prop="mingCheng"
              header-align="center"
              align="center"
              label="药品名称">
            </el-table-column>
            <el-table-column
              prop="fuLeiMingCheng"
              header-align="center"
              align="center"
              label="类型名称">
            </el-table-column>

            <el-table-column
              prop="miaoShu"
              header-align="center"
              align="center"
              label="描述">
            </el-table-column>
            <el-table-column
              prop="shiFouReMen"
              header-align="center"
              align="center"
              label="是否热门">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.shiFouReMen"
                  active-text="是"
                  inactive-text="否"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0"
                  @change="updateZhuangt($event, scope.row.id)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="tuPian"
              header-align="center"
              align="center"
              label="图片">
              <template v-slot="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="getImg(scope.row.tuPian)"
                  :preview-src-list="getPreviewImgList(scope.row.tuPian)"
                  fit="fill"></el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="chanDi"
              header-align="center"
              align="center"
              label="产地">
            </el-table-column>
            <el-table-column
              prop="tianJiaShiJian"
              header-align="center"
              align="center"
              label="添加时间">
            </el-table-column>

            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small"
                           @click="infoHandle(scope.row.id)"><i class="el-icon-edit"></i>查看详情</el-button>
                <el-button type="text" size="small"
                           @click="addOrUpdateHandle(scope.row.id)"><i class="el-icon-edit"></i>修改</el-button>
                <el-button type="text" size="small"
                           @click="deleteHandle(scope.row.id)"><i class="el-icon-delete"></i>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>

        </el-col>
      </el-row>
<!--    ==============================================================-->


        <!-- 弹窗, 新增 / 修改 -->
        <el-dialog title="添加或编辑" :visible.sync="addOrUpdateVisible">
            <el-form :rules="dataRule" :model="dataSaveForm" ref="dataSaveForm" @keyup.enter.native="dataFormSubmit()">
                <el-form-item hidden :label-width="'120px'"  prop="id">
                    <el-input v-model="dataSaveForm.id" autocomplete="off"></el-input>
                </el-form-item>
<!--                        <el-form-item label="父类名称" :label-width="'120px'"  prop="fuLeiMingCheng">
                            <el-input v-model="dataSaveForm.mingCheng" autocomplete="off"></el-input>
                        </el-form-item>-->
              <el-form-item label="所属类型" :label-width="'120px'"  prop="fuLeiID">
                <!--                            <el-input v-model="dataSaveForm.fuLeiID" autocomplete="off"></el-input>-->
                <treeselect ref="lxTree" v-model="dataSaveForm.fuLeiID" :options="leiXingList" :props="props"
                            @valHandler="getSelected"  placeholder="请选择归属类型" />
              </el-form-item>
                        <el-form-item label="药品名称" :label-width="'120px'"  prop="mingCheng">
                            <el-input v-model="dataSaveForm.mingCheng" autocomplete="off"></el-input>
                        </el-form-item>
              <el-form-item label="产地" :label-width="'120px'"  prop="chanDi">
                <el-input v-model="dataSaveForm.chanDi" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="是否热门" :label-width="'120px'" prop="shiFouReMen">
                <!--                            <el-input v-model="dataSaveForm.zhuangTai" autocomplete="off"></el-input>-->
                <el-switch
                  v-model="dataSaveForm.shiFouReMen"
                  active-text="是"
                  inactive-text="否"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0">
                </el-switch>
              </el-form-item>
                        <el-form-item label="描述" :label-width="'120px'"  prop="miaoShu">
                            <el-input v-model="dataSaveForm.miaoShu" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" :label-width="'120px'"  prop="tuPian">
                          <img-upload
                            v-model="dataSaveForm.tuPian"
                            :file-id="dataSaveForm.tuPian"
                            :list="list1"
                            :is-boolean="isBoolean1"
                            ref="pic1"
                          >
                          </img-upload>
                        </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="qx()">取 消</el-button>
                <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 弹窗, 新增 / 修改 -->
        <el-dialog title="药材字典药材类型" :visible.sync="infoVisible">
            <div class="mod-config">
                <el-descriptions :column="2" border :colon="false" title="药材信息" content-class-name="customConten" label-class-name="customelable">
                  <el-descriptions-item label="药材名称" span="1">{{this.infoList.mingCheng}}</el-descriptions-item>
                  <el-descriptions-item label="类型名称" span="1">{{this.infoList.fuLeiMingCheng}}</el-descriptions-item>
                            <el-descriptions-item label="添加时间" >{{this.infoList.tianJiaShiJian}}</el-descriptions-item>
                  <el-descriptions-item label="是否热门" v-if="infoList.shiFouReMen == 0">否</el-descriptions-item>
                  <el-descriptions-item label="是否热门" v-if="infoList.shiFouReMen == 1">是</el-descriptions-item>
                            <el-descriptions-item label="描述" span="3" style="width: 100%">{{this.infoList.miaoShu}}</el-descriptions-item>
<!--                            <el-descriptions-item label="图片">{{this.infoList.tuPian}}</el-descriptions-item>-->
                  <el-descriptions-item label="图片" span="3"><img width="200px" height="200px" v-if="infoList.tuPian"
                                          :src="this.$http.adornUrl('/api-file/file/view/file?fileId='+ this.infoList.tuPian) "></el-descriptions-item>
                </el-descriptions>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="qxinfo()">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import treeselect from "../../../components/tree-select";
// import Treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import ImgUpload from "../../components/upload/ImgUpload.vue";
import { treeDataTranslate } from '../../../utils';

    export default {
      components:{
        treeselect,
        ImgUpload
      },
        data() {
            return {
                dataForm: {
                                mingCheng:'',
                                fuLeiID:'',
                                fuLeiMingCheng:'',
                                miaoShu:'',
                                tuPian:'',
                                dengJi:'',
                                tianJiaShiJian:'',
                                guanLianYongHu:'',
                },
                dataSaveForm: {
                                mingCheng:'',
                                fuLeiID:'',
                                fuLeiMingCheng:'',
                                miaoShu:'',
                                tuPian:'',
                                dengJi:'',
                                tianJiaShiJian:'',
                                guanLianYongHu:'',
                  chanDi:'',
                  shiFouReMen:'1'
                },
                dataRule: {
                                mingCheng: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                fuLeiID: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                fuLeiMingCheng: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                miaoShu: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                tuPian: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],

                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,

                infoList:[],
                infoLoading: false,
                infoVisible: false,
              leiXingList:[],
              props: { // 配置项（必选）
                value: 'id',
                label: 'mingCheng',
                children: 'children'
              },
              list1:[],
              isBoolean1: false,
              leiXingName:undefined,

            }

        },

        activated() {
          this.getLeiXingList()
            this.getDataList()
        },
      watch: {
        // 根据名称筛选类型树
        leiXingName(val) {
          this.$refs.tree.filter(val);
        }
      },
        methods: {
          getPreviewImgList:function(tupian) {
            let arr = []
            arr.push(this.$http.adornUrl('/api-file/file/view/file?fileId='+tupian))
            return arr;
          },
          getImg(tupian){
            return this.$http.adornUrl('/api-file/file/view/file?fileId='+tupian);
          },
          updateZhuangt($event, id){
            // console.log($event)
            // console.log(id)
            var zt=$event
            this.$http({
              url: this.$http.adornUrl(`/api-trading/yaoCaiZiDian/yaoCaiZiDianYaoCaiLeiXing/update`),
              method: 'post',
              // params: this.$http.adornParams({"id": id,"shiFouReMen":zt})
              data: this.$http.adornData({
                'id': id,
                'shiFouReMen': zt,
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: data.msg,
                  type: "success",
                });
                this.getDataList()
              }else{
                this.$message.error("修改状态失败");
              }
            })

          },
            getDataList(pageIndex) {
                if (pageIndex) {
                    this.pageIndex = pageIndex
                }
                this.dataListLoading = true

                this.$http({
                    url: this.$http.adornUrl('/api-trading/yaoCaiZiDian/yaoCaiZiDianYaoCaiLeiXing/list'),
                        method: 'get',
            params: this.$http.adornParams({
                'page': this.pageIndex,
                        'limit': this.pageSize,
                'mingCheng': this.dataForm.mingCheng,
                'fuLeiID': this.dataForm.fuLeiID,
                'fuLeiMingCheng': this.dataForm.fuLeiMingCheng,
                'miaoShu': this.dataForm.miaoShu,
            })
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.records
                        this.totalPage = Number(data.data.total)
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            qx() {
                this.addOrUpdateVisible = false;

            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true;
                this.$nextTick(() => {
                  $(".el-upload-list li").remove();
                  this.getLeiXingList()
                  this.list1=[]
                  this.dataSaveForm.mingCheng = '';
                  this.dataSaveForm.fuLeiID = '';

                  this.dataSaveForm.tuPian=''
                  this.$refs.lxTree.clearHandle()
                    this.$refs['dataSaveForm'].resetFields()
                    if (id) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/yaoCaiZiDian/yaoCaiZiDianYaoCaiLeiXing/getById`),
                                method: 'get',
                                params: this.$http.adornParams({"id":id})
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.dataSaveForm.id = data.data.id
                                this.dataSaveForm.mingCheng = data.data.mingCheng;
                                this.dataSaveForm.fuLeiID = data.data.fuLeiID;
                                this.dataSaveForm.fuLeiMingCheng = data.data.fuLeiMingCheng;
                                this.dataSaveForm.miaoShu = data.data.miaoShu;
                                this.dataSaveForm.tuPian = data.data.tuPian;
                                this.dataSaveForm.shiFouReMen=data.data.shiFouReMen
                              if(data.data.tuPian){
                                this.list1=[];
                                this.list1.push({name: 'img', url: this.$http.adornUrl('/api-file/file/view/file?fileId=' + data.data.tuPian)})
                                this.isBoolean1 = true
                              }
                                this.dataSaveForm.dengJi = data.data.dengJi;
                                this.dataSaveForm.tianJiaShiJian = data.data.tianJiaShiJian;
                                // this.dataSaveForm.guanLianYongHu = data.data.guanLianYongHu;
                                this.dataSaveForm.chanDi=data.data.chanDi
                            }
                        })
                    }
                })

            },
          getLeiXingList(){
              this.leiXingList=[]
            this.$http({
              url: this.$http.adornUrl(`/api-trading/yaoCaiZiDian/yaoCaiZiDianYaoCaiLeiXing/getLeiXing`),
              method: 'get',
              // params: this.$http.adornParams({"id":id})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.leiXingList = treeDataTranslate(data.data, 'id', 'fuLeiID')
                console.log(this.leiXingList)

              }
            })
          },
          // 菜单树选中
          getSelected(e){
              // console.log("444444444444")
            console.log(e.mingCheng)
              this.dataSaveForm.fuLeiMingCheng=e.mingCheng
              this.dataSaveForm.fuLeiID=e.id
          },
          // 筛选节点
          filterNode(value, data) {
            // console.log(data)
            //   console.log(value)
            if (!value) return true;
            return data.mingCheng.indexOf(value) !== -1;
          },
          // 节点单击事件
          handleNodeClick(data) {
            this.dataForm.fuLeiID = data.id;
            this.getDataList();
          },

            qxinfo() {
                this.infoVisible = false;

            },
            // 新增 / 修改
            infoHandle(id) {
                this.infoVisible = true;
                this.infoList=[];
                this.$http({
            url: this.$http.adornUrl(`/api-trading/yaoCaiZiDian/yaoCaiZiDianYaoCaiLeiXing/getById`),
                        method: 'get',
                        params: this.$http.adornParams({"id":id})
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.infoList=data.data;
                    }
                })
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                this.$confirm(`确定要进行删除操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/api-trading/yaoCaiZiDian/yaoCaiZiDianYaoCaiLeiXing/delByIds'),
                            method: 'post',
                            data: this.$http.adornData(ids, false)
                }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                        this.$message.error(data.msg)
                        }
                    })
                })
            },
            // 表单提交
            dataFormSubmit() {
            this.$refs['dataSaveForm'].validate((valid) => {
                    if (valid) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/yaoCaiZiDian/yaoCaiZiDianYaoCaiLeiXing/save`),
                                method: 'post',
                    data: this.$http.adornData({
                    'id': this.dataSaveForm.id || undefined,
                        'mingCheng': this.dataSaveForm.mingCheng,
                        'fuLeiID': this.dataSaveForm.fuLeiID,
                        'fuLeiMingCheng': this.dataSaveForm.fuLeiMingCheng,
                        'miaoShu': this.dataSaveForm.miaoShu,
                        'tuPian': this.dataSaveForm.tuPian,
                        'dengJi': this.dataSaveForm.dengJi,
                        'tianJiaShiJian': this.dataSaveForm.tianJiaShiJian,
                        'guanLianYongHu': this.dataSaveForm.guanLianYongHu,
                      'shiFouReMen':this.dataSaveForm.shiFouReMen,
                      'chanDi':this.dataSaveForm.chanDi,
                    })
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.addOrUpdateVisible = false
                                        this.getDataList()
                                    }
                                })
                            } else {
                            this.$message.error(data.msg)
                            }
                        })
                    }
                })


            },
        }
    }
</script>
<style>
.customConten{
  color: rgb(19 35 29)
}
.customelable{
  color: rgb(19 35 29 / 77%);text-align:right;width:120px;background-color:#10592a0d;font-weight:bold
}
</style>
